<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-select v-model="searchStock.modelId" clearable placeholder="请选择型号">
          <el-option
            v-for="item in allModel"
            :key="item.id"
            :label="item.code"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="province">
        <el-form-item v-if="this.roleType === '1'">
          <v-distpicker @selected="onSearchSelected" :provinceOut="searchStock.province" only-province>
          </v-distpicker>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="excelExport()">数据导出</el-button>
      </el-form-item>
    </el-form>
  <custom-table
    :data="spareStockList"
    :columns="columns"
    :tableLoadingFlag="tableLoadingFlag"
    :pagination="pagination">
  </custom-table>
  </div>
</template>

<script>
  import CustomTable from '@/components/table/CustomTable'
  import {apiGetSpareStockList, apiSpareStockExport} from '@/api/search/standby/index'
  import {apiGetModelList} from '@/api/dictionary'
  import {getRoleType, getUserId, getProvinceCode} from '@/utils/token'
  import {downloadExcel} from "../../../utils";

  export default {
    components: {
      CustomTable
    },
    created() {
      let listQuery = {
        pageNumber: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }
      this.def()
      this.getSpareStockList(listQuery)
      this.getAllModel()
    },
    data() {
      return {
        searchStock: {
          modelId: '',
          province: ''
        },
        listQuery: {
          modelId: undefined,
          province: undefined
        },
        tableLoadingFlag: false,
        roleType: getRoleType(),
        columns: [
          {label: '省份', name: 'provinceName', align: 'center'},
          {label: '型号', name: 'modelId', align: 'center'},
          {label: '数量', name: 'num', align: 'center'},
          {label: '良品', name: 'goodProductInStock', align: 'center'},
          {label: '不良品', name: 'badProductInStock', align: 'center'},
          {label: '在途', name: 'outStock', align: 'center'},
          {label: '工厂积压', name: 'badProductInFactory', align: 'center'}
        ],
        spareStockList: [],
        allModel: [],
        pagination: this.getData(this.getSpareStockList)
      }
    },
    methods: {
      excelExport() {
        let paramsPost = {
          province: this.searchStock.province,
          modelId: this.searchStock.modelId,
          userId: getUserId()
        }
        this.tableLoadingFlag = true
        apiSpareStockExport(paramsPost).then(response => {
          downloadExcel(response.data, '自有售后备机库存信息导出表')
          this.tableLoadingFlag = false
        }).catch(() => {
          console.log('error')
          this.tableLoadingFlag = false
        })
      },
      getSpareStockList (listQuery) {
        this.tableLoadingFlag = true
        if (listQuery.modelId === undefined) {
          listQuery.modelId = this.searchStock.modelId
        }
        if (listQuery.province === undefined) {
          listQuery.province = this.searchStock.province
        }
        apiGetSpareStockList(listQuery).then(response => {
          this.spareStockList = response.data
          let allModel = this.allModel
          for (let i in this.spareStockList) {
            for (let j in allModel) {
              if (this.spareStockList[i].modelId === allModel[j].id) {
                this.spareStockList[i].modelId = allModel[j].code
              }
            }
          }
          this.pagination.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      onSearchSelected(data) {             // 省市区联动回调
        this.searchStock.province = data.province.code
      },
      getAllModel() {
        apiGetModelList().then(response => {
          this.allModel = response.data
        })
      },
      def () {
        if (this.roleType === '2' || this.roleType === '3') {
          this.searchStock.province = getProvinceCode()
        }
      },
      searchData() {
        this.listQuery.province = this.searchStock.province
        this.listQuery.modelId = this.searchStock.modelId
        this.pagination.currentPage = 1
        this.pagination.pageSize = 10
        this.getSpareStockList(this.listQuery)
      }
    }

  }
</script>
